<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="images/logo.ico"/>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>小米商城</title>
</head>
<body>
	<!------------- 顶部导航栏开始 ---------------->
	<div class="topNav-w">
		<div class="topNav">
			<div class="topNav-l">
				<ul>
					<li><a href="#" class="first">小米商城</a></li>
					<li><a href="#">MIUI</a></li>
					<li><a href="#">loT</a></li>
					<li><a href="#">云服务</a></li>
					<li><a href="#">金融</a></li>
					<li><a href="#">有品</a></li>
					<li><a href="#">小爱开发平台</a></li>
					<li><a href="#">政企服务</a></li>
					<li><a href="#">资质证照</a></li>
					<li><a href="#">协议规则</a></li>
					<li><a href="#">下载app</a></li>
					<li class="last"><a href="#">Select Region</a></li>
				</ul>
			</div>
			<div class="topNav-r">
				<ul>
					<li>
						<a href="#">登录</a>
						<a href="#">注册</a>
						<a href="#" class="last">消息通知</a>
					</li>
				</ul>
				<div class="shopping-car">
					<i>&#xe6d4;</i><span>购物车( 0 )</span>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 侧边固定导航 -->

	<div class="rightNav">
		<ul>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<img src="phone_hover" alt="" class="hover-img">
					</div>
					<p>手机APP</p>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<!-- <img src="phone_hover" alt="" class="hover-img"> -->
					</div>
					<p>个人中心</p>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<!-- <img src="phone_hover" alt="" class="hover-img"> -->
					</div>
					<p>售后维修</p>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<!-- <img src="phone_hover" alt="" class="hover-img"> -->
					</div>
					<p>联系客服</p>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<!-- <img src="phone_hover" alt="" class="hover-img"> -->
					</div>
					<p>购物车</p>
				</a>
			</li>
			<li>
				<a href="#">
					<div class="bar_img">
						<img class="original-img" src="images/phone_normal.png">
						<!-- <img src="phone_hover" alt="" class="hover-img"> -->
					</div>
					<p>回顶部</p>
				</a>
			</li>
		</ul>
		
	</div>

	<!-- 头部导航栏 -->
	
	<div class="header">
		<div class="logo">
			<img src="images/logo.jpg" alt="">
		</div>
		<div class="header-nav">
			<ul>
			<li><a href="#">小米手机</a></li>
			<li><a href="#">红米</a></li>
			<li><a href="#">电视</a></li>
			<li><a href="#">笔记本</a></li>
			<li><a href="#">盒子</a></li>
			<li><a href="#">新品</a></li>
			<li><a href="#">路由器</a></li>
			<li><a href="#">智能硬件</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">社区</a></li>
		</ul>
		</div>
		<div class="search">
			<input type="text" class="keyWord">
			<input type="submit" class="search-icon" value="&#xe6cf;"></input>
			<div class="search-hot">
				<a href="#" class="M9">小米6</a>
				<a href="#">小米9 SE</a>
			</div>

		</div>
	</div>

	<!-- 轮播图 -->
	<div class="banner">

		<div class="banner-img">
			<img src="images/banner1.jpg" alt="">
		</div>
		<div class="slideNav">
			<ul>
				<li>
					<a href="#">手机 电话卡<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">电视 盒子<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">笔记本 平板<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">家电 插线板<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">电源 配件<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">出行 穿戴<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">智能 路由器<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">健康儿童<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">耳机 音响<i>&#xe603;</i></a>
				</li>
				<li>
					<a href="#">生活 香包<i>&#xe603;</i></a>
				</li>
			</ul>
		</div>
		<div class="banner-left">
			<i>&#xe606;</i>
		</div>
		<div class="banner-right">
			<i>&#xe63f;</i>
		</div>
		<div class="point-box">
			<ol>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>

	<!-- 热卖手机部分 -->
	<div class="homeHero">
		<ul>
			<li class="first">
				<ul>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
				</ul>
				<ul>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
					<li><i>&#xe6cb;</i><a href="#">选购手机</a></li>
				</ul>
			</li>
			<li><img src="images/xiaomi8.jpg" alt=""></li>
			<li><img src="images/xiaomi8.jpg" alt=""></li>
			<li class="last"><img src="images/xiaomi8.jpg" alt=""></li>
		</ul>

	</div>

	<!-- 中介宣传图 -->
	<div class="middle-bg">
		<img src="images/middlebg.jpg" alt="">
	</div>

	<!-- 手机模块 -->

	<div class="phone">
		<div class="phone-t">
			<span class="phone-t-l">手机</span>
			<span class="phone-t-r">查看全部<i>&#xe603;</i></span>
		</div>
		<div class="phone-content">
			<div class="phone-content-l">
				<img src="images/xiaomi9.jpg" alt="">
			</div>
			<div class="phone-content-r">	
				<ul>
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li class="last">
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
				</ul>
				<ul class="line2">
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li>
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
					<li class="last">
						<div class="new-phoe">新品</div>
						<img src="images/shouji.jpg" alt="">
						<h3>小米9 6GB+128GB</h3>
						<p>骁龙855，索尼4800万超广角微距三摄</p>
						<span>2999元</span>	
					</li>
				</ul>
			</div>
		</div>
		
	</div>
	<!-- 宣传图 -->
	<div class="xuanchuan">
		<img src="images/xct.jpg" alt="">
	</div>
	<!-- 家电部分 -->

	<div class="home_elec">
		<div class="home_elec_l">
			<span>家电</span>
		</div>
		<div class="home_elec_r">
			<ul>
				<li><a href="#">热门</a></li>
				<li><a href="#">电视影音</a></li>
				<li><a href="#">电脑</a></li>
				<li><a href="#">家居</a></li>
			</ul>
		</div>
	</div>

	<div class="footer-top">
		<ul>
			<li><a href="#"><i>&#xe6cb;</i>预约维修服务<a></li>
			<li><a href="#"><i>&#xe6cb;</i>七天无理由退货<a></li>
			<li><a href="#"><i>&#xe6cb;</i>15天免费换货<a></li>
			<li><a href="#"><i>&#xe6cb;</i>满150元包邮<a></li>
			<li class="last"><a href="#"><i>&#xe6cb;</i>520余家售后网点<a></li>
		</ul>
	</div>
	<!-- 帮助中心 -->

	<div class="footer-help">
		<dl>
			<dt>帮助中心</dt>
			<dd><a href="#">账户管理</a></dd>
			<dd><a href="#">购物指南</a></dd>
			<dd><a href="#">订单操作</a></dd>
		</dl>
		<dl>
			<dt>服务支持</dt>   
			<dd><a href="#">售后政策</a></dd>
			<dd><a href="#">自助服务</a></dd>
			<dd><a href="#">相关下载</a></dd>
		</dl>
		<dl>
			<dt>线下门店</dt>
			<dd><a href="#">小米之家</a></dd>
			<dd><a href="#">服务网点</a></dd>
			<dd><a href="#">授权体验店</a></dd>
		</dl>
		<dl>
			<dt>关于小米</dt>
			<dd><a href="#">了解小米</a></dd>
			<dd><a href="#">加入小米</a></dd>
			<dd><a href="#">投资者关系</a></dd>
		</dl>
		<dl>
			<dt>关注我们</dt>
			<dd><a href="#">新浪微博</a></dd>
			<dd><a href="#">官方微信</a></dd>
			<dd><a href="#">联系我们</a></dd>
		</dl>
		<dl>
			<dt>特色服务</dt>
			<dd><a href="#">F 码通道</a></dd>
			<dd><a href="#">礼物码</a></dd>
			<dd><a href="#">防伪查询</a></dd>
		</dl>
		<div class="help-right">
			<div class="call-us">
				<p>400-100-5678</p>
				<span class="span-1">周一至周日 8:00-18:00</span>
				<span>（仅收市话费）</span>
				<a href="#"><i>&#xe6d3;</i>联系客服</a>
			</div>
		</div>
	</div>
	
</body>
</html>